<template>
  <div class="layout" :v-loading.fullscreen.lock="loading">

    <div class="layout_header"  >

    </div>

    <el-row style="width: 100%; height: 100%" >

        <el-col :span="spanLeft" style="height: 100%; background-color: #324157;" >
          <div class="grid-content bg-purple">

            <button  class="bmore"  @click="openOrClose" >
              <img style="height: 15px" src="../assets/more.png"/>
            </button>

            <el-menu  defaultActive="home"  class="el-menu" @open="handleOpen" @close="handleClose" :collapse="isCollapse" theme="dark" router >

              <template v-bind="menus" v-for="(menu, index) in menus">

                 <el-submenu  :index="menu.menuurl" v-if="menu.children">

                   <template slot="title">
                     <i class="el-icon-message"></i>
                     <span slot="title">{{ menu.menuname }}</span>
                   </template>

                   <template v-for="(submenu, ins) in menu.children" >
                      <el-menu-item :index="submenu.menuurl" class="submenu" style="min-width: 100%">
                          <i class="el-icon-setting"></i>
                          <span slot="title">{{ submenu.menuname }}</span>
                      </el-menu-item>
                   </template>

                 </el-submenu>

                <el-menu-item :index="menu.menuurl" v-else>
                  <i class="el-icon-setting"></i>
                  <span slot="title">{{ menu.menuname }}</span>
                </el-menu-item>

              </template>

            </el-menu>
          </div>
        </el-col>

        <el-col :span="spanRight" style="height: 100%; background-color: white">
          <div class="grid-content bg-purple-light">
            <div class="layout-content-main">
            <keep-alive>
            <router-view></router-view>
            </keep-alive>
            </div>
          </div>
        </el-col>
    </el-row>

  </div>
</template>
<script>

  export default {

    data() {
      return {
        spanLeft: 2,
        spanRight: 22,
        isCollapse: false,
        menus: [],
        loading: true,
      };
    },
    mounted () {
      this.getMenus();
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      openOrClose(){
        let self = this;
        self.isCollapse = !self.isCollapse;
        self.spanLeft = self.isCollapse === true ? 1 : 2;
        self.spanRight = self.isCollapse === true ? 23 : 22;
      },
      getMenus () {
        self = this;
        if (!this.token) {
          let url = "http://localhost:8081/console/menu/list";
          fetch(url, {
            method: "GET",
            headers: {
              'Access-Control-Allow-Origin': '*',
              'Authorization': this.token,
            }
          }).then(function (response) {
            response.json().then(function(data){
              console.log("请求成功，JSON解析后的响应数据为:",data.data);
              self.menus = data.data
            });
          });
          this.loading = false;
        }else {
          this.$router.push('/')
        }
      }
    }
  }
</script>

<style scoped>
  .layout{
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
    font-size: 12px;
  }

  .layout_header{
    width: 100%;
    height: 40px;
    background-color: #1c2438;
  }

  .bmore {
    background-color: #324057;
    width: 100%;
    height: 30px;
  }
  .submenu{
    padding-left: 20% !important;
  }
  .layout-content-main{
    padding: 5px;
  }

</style>
